<template>
  <div class="details-box">
    <div class="top">
      <div class="huan">
              <span>嗨购秒杀</span>&nbsp;&nbsp;&nbsp;<span style="color: red">22点场</span>      
                &nbsp;&nbsp;&nbsp;&nbsp;
        <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>

      </div>
      <span class="dec" @click="goNext">爆款轮番秒 <van-icon name="arrow" /></span>
    </div>
    <ul>
      <li v-for="item in list" :key="item.proid" @click="goDetail(item.proid)">
        <img :src="item.img1" alt="">
        <p>￥{{item.originprice}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "SeckillVue",
  data() {
    return {
      time: 2 * 60 * 60 * 1000,
      list: [],
      count:"1",
    };
  },
  created() {
    // 获取秒杀商品的列表
    let getKillsGoods=()=>{
      axios({
      url: "http://121.89.205.189:3001/api/pro/seckilllist",
      params:{
        count:this.count
      }
      }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    }
    getKillsGoods()
  },
  methods:{
    // 点击右箭头 显示下一页秒杀商品列表
    goNext(){
      this.count++
      if(this.count>3){
        this.count=1
      }
      let getKillsGoods=()=>{
        axios({
        url: "http://121.89.205.189:3001/api/pro/seckilllist",
        params:{
          count:this.count
        }
        }).then((res) => {
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
      });
    }
    getKillsGoods()
    },
    goDetail(goodsid){
        this.$router.push("/goodsdetail/"+ goodsid)
        window.location.reload()
    }
  }
};
</script>

<style scoped>
.details-box {
  background-color: white;
  box-sizing: border-box;
  height: 9rem;
  margin: 0.625rem;
  border-radius: 0.625rem;
  padding: 0.625rem;
  font-size: 12px;
  background: url("../assets/title_wrap.png")  white;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 1.125rem;
  color: #fff;
  font-size: .625rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: #ee0a24;
}
.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: .625rem;
}
.huan{
  display: flex;
}
ul{
  height: 3.75rem;
  display: flex;
  justify-content: space-between;
  margin-top: .625rem;
}
img{
  width: 100%;
  height: 100%;
}
p{
  color: #f66;
  margin-top: .1875rem;
}
.dec{
  color: #f66;
}
.van-icon{
  background-color: #f66;
  border-radius: 50%;
  color: white;
  font-size: .75rem;
}
</style>